<template>
	<view class="pages">
		<view v-if="!collection" class="flex align-center justify-center flex-column add-content">
			<view class="add-btn u-font-32 flex align-center justify-center" @click="add">
				<u-icon class="u-m-r-5"
					name="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/22/6bb8ae6ae7914ad9883ba06b9e4185a2.png"
					size="36"></u-icon>
				创建合集，及时归类
			</view>
		</view>
		<view v-else>
			<view v-if="isContent" :class="{'animate__fadeIn':isContent}">
				<!-- 科目名称 -->
				<view class="u-p-l-20 u-p-r-20">
					<view class="top u-p-30">
						<view class="flex align-center justify-between">
							<view class="all flex align-center justify-center" @click="handleOpenAll">
								<u-icon
									name="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/22/274ae0062cb549ea90e2784fe6fe433b.png"
									size="28"></u-icon>
								全部合集
							</view>
							<view class="edit flex align-center" @click="handleEdit">
								<u-icon name="edit-pen-fill" color="#333" size="28"></u-icon>
								{{!isEdit ? '编辑合集':'取消编辑'}}
							</view>
						</view>
						<view class="flex align-center justify-center u-font-24 title u-m-t-5">
							<text class="u-m-r-20">{{collection.subjectName || ''}}</text>
							<text>{{collection.subjectName2 || ''}}</text>
						</view>
						<view class="u-font-32 text-center w-100 u-m-t-25" @click="handleEditCollection">
							{{collection.treePrivateName || ''}}
							<u-icon class="u-m-l-20" v-if="isEdit" name="edit-pen-fill" color="#333" size="24"></u-icon>
						</view>
					</view>
				</view>
				<!-- 章 * 节 -->
				<view class="content">
					<!-- 章 -->
					<view class="asile">
						<view v-if="!isEdit" class="add" @click="addAsile"> + 章</view>
						<scroll-view scroll-y="true" :style="'height:'+asileH+'px;'" @scrolltolower="handleAsileList">
							<view class="asile-item" :class="{'active-asile-item bold text-black':index === asileCurrent}"
								v-for="(item,index) in asile" :key="index" @click="handelAsileItem(index)">
								{{item.name}}
								<u-icon v-if="!isEdit" v-show="index === asileCurrent" class="arrow-right" name="arrow-right"
									color="#333" size="24"></u-icon>
								<u-icon class="arrow-right" v-else name="edit-pen-fill" color="#333" size="24"></u-icon>
							</view>
							<view class="u-p-b-30 u-p-t-30" v-if="asile && asile.length">
								<u-loadmore @loadmore="handleAsileList" font-size="24" color="#999" :status="asilePage.status" />
							</view>
						</scroll-view>
					</view>
					<!-- 节 -->
					<view class="main">
						<view v-if="!isEdit" class="add" @click="addJoint"> + 节</view>
						<scroll-view scroll-y="true" :style="'height:'+asileH+'px;'" @scrolltolower="handleMainList">
							<view class="main-item flex align-center " @click="handelMainItem(index)"
								:class="{'active-main-item text-black' : index === mainCurrent}" v-for="(item,index) in main"
								:key="index">
								<view @click="openList(item)" class="text-ellipsis" style="width: 250rpx;"
									:class="{'bold': index === mainCurrent}">
									{{item.name}}
								</view>
								<!-- <view v-if="!isEdit" class="association ml-auto">+关联</view> -->
								<view v-if="!isEdit" class="association ml-auto" @click="addKnowledge(item)">+知识</view>
								<u-icon class="ml-auto" v-if="isEdit" name="edit-pen-fill" color="#333" size="24"></u-icon>
								<!-- <view class="association-item ml-auto">
								<u-icon name="checkbox-mark" color="#333"></u-icon>
							</view> -->
							</view>
							<view class="u-p-b-30 u-p-t-30" v-if="main && main.length">
								<u-loadmore @loadmore="handleMainList" font-size="24" color="#999" :status="mainPage.status" />
							</view>
							<!-- 提示 -->
							<view class="w-100 flex align-center justify-center u-m-t-60">
								<u-image
									src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/23/5619126af3a94479afaa7747f8f325e2.png"
									width="84" height="84" mode="aspectFit"></u-image>
								<view class="u-font-28 color999 u-m-l-5">
									<view>点击"节"标题</view>
									<view>可看到关联的知识喔！</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 创建合集 -->
			<view class="position-fixed create" v-if="isCreate" :style="'padding-bottom:'+safeAreaInsetsBottom+'px;'">
				<view class="create-box" @click="add">
					<u-icon
						name="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/22/c9bebc8f61a14659941439afefe7724d.png"
						size="42"></u-icon>
					创建合集
				</view>
			</view>
		</view>
		<u-select :default-value="defaultValue" safe-area-inset-bottom title="选择分类,不确定的选择“其他”" cancel-color="#333"
			:mask-close-able="false" confirm-color="#333" v-model="handleClassShow" mode="mutil-column-auto"
			:list="selectList" @confirm="confirm">
			<u-icon class="u-m-l-10" slot="titleSolt"
				name="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/22/c9bebc8f61a14659941439afefe7724d.png"
				size="60"></u-icon>
		</u-select>
		<!-- 合集抽屉 -->
		<u-popup mode="right" width="70%" v-model="allShow">
			<view class="popup">
				<view class="text-center u-font-32 color333 u-p-t-30 u-p-b-30 title">切换合集</view>
				<view class="list">
					<view class="item" @click="handleCollection(item)" v-for="(item,index) in popupList" :key="index">
						{{item.treePrivateName}}
					</view>
				</view>
				<view class="u-p-b-30 u-p-t-30" v-if="popupList && popupList.length">
					<u-loadmore @loadmore="handlePopupBottom" font-size="24" color="#999" :status="popupPage.status" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		treeQuery
	} from '@/api/send.js'
	import {
		getSubject
	} from '@/api/index.js'
	export default {
		data() {
			return {
				popupList: [],
				popupPage: {
					page: 1,
					size: 15,
					status: 'loadmore'
				},
				isEdit: false, //是否是编辑状态
				list: [],
				mainPage: {
					page: 1,
					size: 15,
					status: 'loadmore'
				},
				asilePage: {
					page: 1,
					size: 15,
					status: 'loadmore'
				},
				collectionPage: {
					page: 1,
					size: 15,
					status: 'loadmore'
				},
				collection: null, //合集数据
				defaultValue: [1, 0],
				allShow: false,
				isContent: false,
				isCreate: false,
				mainCurrent: 0,
				main: [],
				asileH: 0,
				asileCurrent: 0,
				asile: [],
				selectList: [],
				handleClassShow: false,
				safeAreaInsetsBottom: 0, //安全区
			};
		},
		onLoad() {
			this.$nextTick(() => {
				this.safeAreaInsetsBottom = this.$u.sys().safeAreaInsets.bottom;
				this.asileH = this.$u.sys().windowHeight - uni.upx2px(280) - this.safeAreaInsetsBottom;
				this.isCreate = true;
				this.isContent = true;
			})
			if (uni.getStorageSync('subjectList')) {
				this.selectList = JSON.parse(uni.getStorageSync('subjectList'));
			} else {
				this.handleGetSubJect(0);
			}
		},
		onShow() {
			this.mainPage.page = 1;
			this.asilePage.page = 1;
			this.getData(1);
		},
		methods: {
			//合集点击触底加载分页
			handlePopupBottom() {
				if (this.popupPage.status === 'nomore') return;
				this.popupPage.page++;
				this.popupPage.status = 'loading';
				this.getPopupList();
			},
			//节下拉触底
			handleMainList() {
				if (this.mainPage.status === 'nomore') return;
				this.mainPage.page++;
				this.mainPage.status = 'loading';
				this.getMain();
			},
			//章节下拉触底
			handleAsileList() {
				if (this.asilePage.status === 'nomore') return;
				this.asilePage.page++;
				this.asilePage.status = 'loading';
				this.getAsile();
			},
			//修改合集名称
			handleEditCollection() {
				if (this.isEdit) {
					uni.setStorageSync('subject', JSON.stringify({
						collectionId: this.collection.id,
						collectionName: this.collection.treePrivateName,
						subjectCode: this.collection.subjectCode,
						subjectCode2: this.collection.subjectCode2,
						subjectName: this.collection.subjectName,
						subjectName2: this.collection.subjectName2,
					}))
					uni.navigateTo({
						url: '/pages/send/knowledge/knowledgeCreateName/knowledgeCreateName?key=edit',
					});
				}
			},
			//开启编辑状态
			handleEdit() {
				this.isEdit = !this.isEdit;
			},
			//创建节
			addJoint() {
				if (!this.asile.length) {
					uni.showToast({
						title: '请先创建章!',
						icon: 'none'
					});
					return;
				}
				uni.setStorageSync('subject', JSON.stringify({
					chapterId: this.asile[this.asileCurrent].id,
					chapterName: this.asile[this.asileCurrent].name,
					collectionId: this.collection.id,
					collectionName: this.collection.treePrivateName,
					subjectCode: this.collection.subjectCode,
					subjectCode2: this.collection.subjectCode2,
					subjectName: this.collection.subjectName,
					subjectName2: this.collection.subjectName2,
					publicId: this.asile[this.asileCurrent].treePublicId,
				}))
				uni.navigateTo({
					url: '/pages/send/knowledge/knowledgeCreateJoint/knowledgeCreateJoint',
				});
			},
			//根据章获取节
			getMain() {
				treeQuery({
					parentId: this.asile[this.asileCurrent].id,
					page: this.mainPage.page,
					size: this.mainPage.size,
					type: 2,
					asc: true,
					createUserId: uni.getStorageSync('userId')
				}).then(res => {
					if (res.code == 100000) {
						if (this.mainPage.page == 1) {
							this.main = [];
						}
						if (res.data.list && res.data.list.length) {
							if (this.mainPage.page == 1) {
								this.main = res.data.list.map(e => {
									return {
										id: e.id,
										name: e.treePrivateName,
										treePublicId: e.treePublicId
									}
								})
							} else {
								let list = res.data.list.map(e => {
									return {
										id: e.id,
										name: e.treePrivateName,
										treePublicId: e.treePublicId
									}
								})
								this.main.push(...list);
							}
						}
						if (!res.data || !res.data.list || !res.data.list.length || res.data.list.length < this.mainPage.size) {
							this.mainPage.status = 'nomore';
						} else {
							this.mainPage.status = 'loadmore';
						}
					}
				})
			},
			//选择合集
			handleCollection(row) {
				this.collection = row;
				this.collectionPage.page = 1;
				this.asilePage.page = 1;
				this.allShow = false;
				this.getAsile();
			},
			//创建章
			addAsile() {
				uni.setStorageSync('subject', JSON.stringify({
					publicId: this.collection.treePublicId,
					collectionId: this.collection.id,
					collectionName: this.collection.treePrivateName,
					subjectCode: this.collection.subjectCode,
					subjectCode2: this.collection.subjectCode2,
					subjectName: this.collection.subjectName,
					subjectName2: this.collection.subjectName2,
				}))
				uni.navigateTo({
					url: '/pages/send/knowledge/knowledgeCreateChapter/knowledgeCreateChapter?key=back',
				});
			},
			//获取学科门类
			handleGetSubJect(type) {
				let data = {
					pageNum: 1,
					pageSize: 99999,
					type,
					year: new Date().getFullYear(),
				}
				getSubject(data).then(res => {
					if (res.code == 100000 && res.data && res.data.rows && res.data.rows.length) {
						if (type === 0) {
							this.selectList = res.data.rows.map(e => {
								return {
									value: e.subjectCode,
									label: e.title,
									subjectCode: e.subjectCode,
									children: []
								}
							})
							this.selectList.unshift({
								value: null,
								label: "其他",
								subjectCode: null,
								children: [{
									value: null,
									label: "其他",
								}]
							})
							this.handleGetSubJect(1);
						}
						if (type === 1) {
							this.selectList.forEach(e => {
								let list = res.data.rows.filter(v => v.parentCode == e.subjectCode);
								if (list && list.length) {
									e.children = list.map(v => {
										return {
											value: v.subjectCode,
											label: v.title,
										}
									})
								}
							})
							uni.setStorageSync('subjectList', JSON.stringify(this.selectList));
						}
					}
				})
			},

			//获取抽屉合集数据
			getPopupList() {
				if (this.popupPage.page == 1) {
					this.popupList = [];
				}
				uni.showLoading({
					mask: true
				});
				treeQuery({
					page: this.popupPage.page,
					size: this.popupPage.size,
					type: 0,
					createUserId: uni.getStorageSync('userId'),
				}).then(res => {
					if (res.code == 100000) {
						if (res.data.list.length) {
							let list = res.data.list.map(e => {
								return {
									id: e.id,
									subjectCode: e.subjectCode,
									subjectCode2: e.subjectCode2,
									subjectName: e.subjectName,
									subjectName2: e.subjectName2,
									treePrivateName: e.treePrivateName,
									treePublicId: e.treePublicId
								}
							});
							this.popupList.push(...list);
						}
						if (Number(res.data.tatol) <= this.popupList.length) {
							this.popupPage.status = 'nomore';
						} else {
							this.popupPage.status = 'loadmore';
						}
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			//获取合集数据
			getData(type) {
				treeQuery({
					page: type == 1 ? 1 : this.collectionPage.page,
					size: type == 1 ? 1 : this.collectionPage.size,
					type: 0,
					createUserId: uni.getStorageSync('userId'),
					orderItemQueries: [{
						asc: false,
						fieldName: ""
					}],
				}).then(res => {
					if (res.code == 100000 && res.data.list && res.data.list.length) {
						if (type == 1) {
							this.collection = res.data.list[0];
							this.getAsile();
						} else {
							this.list = res.data.list.map(e => {
								return {
									id: e.id,
									subjectCode: e.subjectCode,
									subjectCode2: e.subjectCode2,
									subjectName: e.subjectName,
									subjectName2: e.subjectName2,
									treePrivateName: e.treePrivateName,
									treePublicId: e.treePublicId
								}
							})
						}
					}
				})
			},
			//根据合集获取章
			getAsile() {
				treeQuery({
					parentId: this.collection.id,
					page: this.asilePage.page,
					size: this.asilePage.size,
					type: 1,
					asc: true,
					createUserId: uni.getStorageSync('userId')
				}).then(res => {
					if (res.code == 100000) {
						if (this.asilePage.page == 1) {
							this.asile = [];
						}
						if (res.data.list && res.data.list.length) {
							if (this.asilePage.page == 1) {
								this.asile = res.data.list.map(e => {
									return {
										id: e.id,
										name: e.treePrivateName,
										treePublicId: e.treePublicId
									}
								})
								this.getMain();
							} else {
								let list = res.data.list.map(e => {
									return {
										id: e.id,
										name: e.treePrivateName,
										treePublicId: e.treePublicId
									}
								})
								this.asile.push(...list);
							}
						}
						if (!res.data || !res.data.list || !res.data.list.length || res.data.list.length < this.asilePage.size) {
							this.asilePage.status = 'nomore';
						} else {
							this.asilePage.status = 'loadmore';
						}
					}
				})
			},
			//点击全部合集
			handleOpenAll() {
				this.getPopupList();
				this.allShow = true;
			},
			//添加知识
			addKnowledge(row) {
				uni.navigateTo({
					url: `/pages/send/knowledge/knowledgeListSelect/knowledgeListSelect?name=${row.name}&id=${row.id}`,
				});
			},
			//打开知识体系
			openList(row) {
				let data = {
					subjectName: this.collection.subjectName,
					subjectName2: this.collection.subjectName2,
					treeName: this.collection.treePrivateName,
					chapterName: this.asile[this.asileCurrent].name,
					name: row.name,
					id: row.id
				}
				if (!this.isEdit) {
					uni.navigateTo({
						url: '/pages/send/knowledge/konwledgeList/konwledgeList?info='+ JSON.stringify(data),
					});
				}
			},
			edit() {},
			handelAsileItem(i) {
				//修改章
				if (this.isEdit) {
					uni.setStorageSync('subject', JSON.stringify({
						publicId: this.collection.treePublicId,
						collectionId: this.collection.id,
						collectionName: this.collection.treePrivateName,
						subjectCode: this.collection.subjectCode,
						subjectCode2: this.collection.subjectCode2,
						subjectName: this.collection.subjectName,
						subjectName2: this.collection.subjectName2,
						chapterName: this.asile[i].name,
						chapterId: this.asile[i].id,
					}))
					uni.navigateTo({
						url: '/pages/send/knowledge/knowledgeCreateChapter/knowledgeCreateChapter?key=edit',
					});
				} else {
					this.asileCurrent = i;
					this.getMain();
				}
			},
			handelMainItem(i) {
				if (this.isEdit) {
					uni.setStorageSync('subject', JSON.stringify({
						collectionId: this.collection.id,
						collectionName: this.collection.treePrivateName,
						subjectCode: this.collection.subjectCode,
						subjectCode2: this.collection.subjectCode2,
						subjectName: this.collection.subjectName,
						subjectName2: this.collection.subjectName2,
						chapterName: this.asile[this.asileCurrent].name,
						chapterId: this.asile[this.asileCurrent].id,
						jonitName: this.main[i].name,
						jonitId: this.main[i].id,
						publicId: this.asile[this.asileCurrent].treePublicId,
					}))
					uni.navigateTo({
						url: '/pages/send/knowledge/knowledgeCreateJoint/knowledgeCreateJoint?key=edit',
					});
				} else {
					this.mainCurrent = i;
				}
			},
			confirm(e) {
				let obj = {
					subjectCode: e[0].value,
					subjectName: e[0].label,
					subjectCode2: e[1].value,
					subjectName2: e[1].label,
				}
				uni.setStorageSync('subject', JSON.stringify(obj));
				uni.navigateTo({
					url: '/pages/send/knowledge/knowledgeCreateName/knowledgeCreateName',
				});
			},
			add() {
				this.handleClassShow = true;
			},
		}
	}
</script>
<style lang="scss" scoped>
	/deep/ .u-select__header {
		color: #999999 !important;
	}

	.pages {
		background-color: #F6F8F6;
		min-height: 100vh;

		.add-content {
			min-height: 100vh;
		}
	}

	.add-btn {
		background-color: #F7DD5E;
		border-radius: 100rpx;
		color: #333;
		height: 112rpx;
		width: 400rpx;
	}

	.tips {
		color: #5E748B;
	}

	.title-box {
		border-bottom: 2rpx solid #999999;
	}

	.create {
		right: 50rpx;
		bottom: 100rpx;

		.create-box {
			width: 110rpx;
			height: 110rpx;
			border-radius: 100rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 22rpx;
			color: #FFFFFF;
			background-color: rgba(102, 102, 102, .66);
		}
	}

	.top {
		height: 312rpx;
		background-color: #F7DD5E;
		border-radius: 24rpx;

		.tle {
			color: #4C6F7F;
		}

		.all {
			background-color: #333333;
			font-size: 24rpx;
			color: #F7DD5E;
			border-radius: 100rpx;
			height: 60rpx;
			width: 180rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.edit {
			color: #333;
			font-size: 28rpx;
		}
	}

	.content {
		border-radius: 76rpx 76rpx 0 0;
		background-color: #FFFFFF;
		margin-top: -74rpx;
		display: flex;

		.asile {
			width: 314rpx;
			position: relative;
			border: 2rpx solid #EBEEEF;
			border-radius: 76rpx 0 0 0;
			padding-top: 34rpx;

			.asile-item {
				height: 104rpx;
				width: 100%;
				line-height: 104rpx;
				text-align: center;
				font-size: 28rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				position: relative;
			}

			.arrow-right {
				position: absolute;
				top: 50%;
				right: 8rpx;
				transform: translate(0, -50%);
			}

			.active-asile-item {
				background-color: #F9F9F7;
			}

			.add {
				font-size: 24rpx;
				background-color: #333;
				color: #F7DD5E;
				width: 110rpx;
				height: 60rpx;
				border-radius: 100rpx;
				text-align: center;
				line-height: 60rpx;
				z-index: 10;
				position: absolute;
				left: 68rpx;
				top: -16rpx;
			}
		}

		.main {
			flex: 1;
			position: relative;
			border: 2rpx solid #EBEEEF;
			border-radius: 0 76rpx 0 0;
			padding-top: 34rpx;

			.association-item {
				background-color: #F7DD5E;
				width: 88rpx;
				height: 60rpx;
				border-radius: 100rpx;
				text-align: center;
				line-height: 60rpx;
				color: #333;
			}

			.association {
				color: #F7DD5E;
				font-size: 24rpx;
				background-color: #333;
				width: 88rpx;
				height: 60rpx;
				border-radius: 100rpx;
				text-align: center;
				line-height: 60rpx;
			}




			.main-item {
				height: 104rpx;
				font-size: 26rpx;
				color: #7F7F7F;
				padding-left: 36rpx;
				padding-right: 20rpx;
				line-height: 104rpx;
			}

			.active-main-item {
				background-color: #F9F9F7;
			}

			.add {
				font-size: 24rpx;
				background-color: #333;
				color: #F7DD5E;
				width: 110rpx;
				height: 60rpx;
				border-radius: 100rpx;
				text-align: center;
				line-height: 60rpx;
				z-index: 10;
				position: absolute;
				left: 68rpx;
				top: -16rpx;
			}
		}
	}

	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0
		}

		to {
			opacity: 1
		}
	}

	@keyframes fadeIn {
		0% {
			opacity: 0
		}

		to {
			opacity: 1
		}
	}

	.animate__fadeIn {
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
		animation-duration: .3s;
	}

	.popup {
		.title {
			border-bottom: 2rpx solid #999;
			font-weight: bold;
		}

		.list {
			.item {
				padding: 20rpx;
				font-size: 28rpx;
				color: #333;
				border-bottom: 2rpx solid #dedede;
			}
		}
	}
</style>